/* ═══════════════════════════════════════════════
   SPYGI — SIGN IN / PUBLIC DESIGN
   Verbatim from the new Spygi sign-in HTML + aMember auth-form bridge.
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   GLOBAL TOKENS
═══════════════════════════════════════ */
:root {
  --orange:      #F26522;
  --orange-lt:   #F4A936;
  --red:         #C0392B;
  --grad:        linear-gradient(135deg, #F4A936 0%, #F26522 55%, #C0392B 100%);
  --grad-h:      linear-gradient(135deg, #F26522 0%, #E63946 100%);
  --grad-bar:    linear-gradient(90deg, #F4A936 0%, #F26522 100%);
  --grad-text:   linear-gradient(120deg, #F4A936 0%, #F26522 55%, #C0392B 100%);
}

body[data-theme="dark"] {
  --bg:          #080808;
  --surface:     #111111;
  --card:        #161616;
  --elevated:    #1E1E1E;
  --border:      rgba(255,255,255,0.07);
  --border-h:    rgba(255,255,255,0.14);
  --t1:          #F0F0F0;
  --t2:          #888888;
  --t3:          #505050;
  --sh-card:     0 4px 32px rgba(0,0,0,0.55);
  --sh-lg:       0 24px 64px rgba(0,0,0,0.7);
}

body[data-theme="light"] {
  --bg:          #F8F3EA;
  --surface:     #FFFFFF;
  --card:        #FFFFFF;
  --elevated:    #FFF8ED;
  --border:      #E8DED0;
  --border-h:    #D4C4AE;
  --t1:          #151515;
  --t2:          #6B6258;
  --t3:          #9A8F85;
  --sh-card:     0 4px 20px rgba(158,17,16,0.08);
  --sh-lg:       0 18px 44px rgba(158,17,16,0.12);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Sora', sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  overflow: hidden;
  transition: background .35s, color .35s;
}

/* ─── BACKGROUND SCENE ─── */
.scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  transition: background .35s;
}
body[data-theme="dark"] .scene {
  background:
    radial-gradient(ellipse 70% 55% at 68% 8%,  rgba(242,101,34,.13), transparent 52%),
    radial-gradient(ellipse 55% 45% at 8%  82%,  rgba(192,57,43,.09),  transparent 48%),
    radial-gradient(ellipse 38% 38% at 92% 92%,  rgba(244,169,54,.06), transparent 40%),
    #080808;
}
body[data-theme="light"] .scene {
  background:
    radial-gradient(ellipse 70% 55% at 68% 8%,  rgba(244,169,54,.24), transparent 52%),
    radial-gradient(ellipse 55% 45% at 8%  82%,  rgba(242,101,34,.11), transparent 48%),
    radial-gradient(ellipse 38% 38% at 92% 92%,  rgba(158,17,16,.05),  transparent 40%),
    #F8F3EA;
}

.orb {
  position: absolute; border-radius: 50%; filter: blur(90px);
  animation: orbF 14s ease-in-out infinite;
}
.orb1 { width:520px; height:520px; top:-160px; right:-120px;
  background: radial-gradient(circle, rgba(242,101,34,.22), transparent 68%); animation-delay:0s; }
.orb2 { width:380px; height:380px; bottom:-110px; left:-80px;
  background: radial-gradient(circle, rgba(192,57,43,.15), transparent 68%); animation-delay:-5s; }
.orb3 { width:280px; height:280px; top:42%; left:42%;
  background: radial-gradient(circle, rgba(244,169,54,.09), transparent 68%); animation-delay:-9s; }
@keyframes orbF {
  0%,100%{ opacity:1; transform:translateY(0) scale(1); }
  40%    { transform:translateY(-28px) scale(1.04); }
  70%    { transform:translateY(18px) scale(.97); }
}
.grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(242,101,34,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,101,34,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black, transparent);
}

/* ─── LAYOUT ─── */
.layout {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 500px;
}

/* ─── BRAND PANEL ─── */
.brand {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 52px 60px;
  position: relative;
  overflow: hidden;
}
.brand::after {
  content:''; position:absolute; right:0; top:8%; bottom:8%; width:1px;
  background: linear-gradient(180deg, transparent, var(--border) 25%, var(--border) 75%, transparent);
}

.brand-top { display:flex; flex-direction:column; gap:52px; }

/* ── LOGO ── */
.logotype {
  display:flex; align-items:center;
  animation: riseUp .7s ease both;
}

/* Dark theme: white wordmark version, Light theme: black wordmark version */
.logo-dark { display:block; }
.logo-light { display:none; }

body[data-theme="light"] .logo-dark { display:none; }
body[data-theme="light"] .logo-light { display:block; }

.logo-full svg,
.logo-icon svg {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Headline */
.headline { animation: riseUp .7s .1s ease both; }
.eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before {
  content:''; display:inline-block; width:26px; height:2px;
  background: var(--grad-bar); border-radius:2px;
}
.headline h1 {
  font-family:'DM Serif Display', serif;
  font-size: clamp(34px,3.3vw,50px);
  line-height:1.08; font-weight:400; letter-spacing:-1.2px;
  color: var(--t1);
}
.headline h1 em {
  font-style:italic;
  background: var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.headline p {
  margin-top:20px; font-size:14.5px; line-height:1.75;
  color: var(--t2); max-width:440px;
}

/* Stats */
.stats {
  display:flex; gap:0; margin-top:40px;
  animation: riseUp .7s .2s ease both;
}
.stat { flex:1; }
.stat + .stat { border-left:1px solid var(--border); padding-left:28px; }
.stat:first-child { padding-right:28px; }
.stat-val {
  font-size:30px; font-weight:700; letter-spacing:-1.2px; line-height:1;
  background: var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-lbl { font-size:12px; color:var(--t3); margin-top:5px; font-weight:500; }

/* ── PREMIUM EMPTY SPACE / RIGHT ACCENT ── */
.brand-visual {
  animation: riseUp .7s .28s ease both;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.tool-pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--border);
  color: var(--t2);
  background: var(--card);
  backdrop-filter: blur(8px);
  transition: border-color .2s, color .2s;
}

body[data-theme="light"] .tool-pill {
  background: rgba(255,255,255,0.72);
  border-color: #E8DED0;
}

.tool-pill i {
  font-size: 11px;
  color: var(--orange);
}

.pill-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 4px;
  padding-left: 2px;
}

/* ─── FORM PANEL ─── */
.form-panel {
  background: var(--surface);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: 52px 52px;
  position:relative;
  box-shadow: -20px 0 80px rgba(0,0,0,.12);
  animation: slideR .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideR {
  from { transform:translateX(36px); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}

.form-inner { width:100%; max-width:372px; }

/* ── MODERN THEME TOGGLE ── */
.theme-toggle {
  position:absolute; top:24px; right:24px;
  display:flex; align-items:center; gap:0;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:100px;
  padding:4px;
  box-shadow: var(--sh-card);
}
.toggle-opt {
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 14px;
  border-radius:100px;
  font-size:12px; font-weight:600; cursor:pointer;
  transition: all .22s;
  color: var(--t3);
  user-select:none; white-space:nowrap;
  border:none; background:none; font-family:'Sora',sans-serif;
}
.toggle-opt i { font-size:11px; }
.toggle-opt.active {
  background: var(--elevated);
  color: var(--t1);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
body[data-theme="light"] .toggle-opt.active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* Form header */
.fhead { margin-bottom:34px; animation: riseUp .55s .12s ease both; }
.fhead .badge {
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, rgba(242,101,34,.11), rgba(192,57,43,.07));
  border:1px solid rgba(242,101,34,.22);
  border-radius:100px; padding:5px 13px;
  font-size:10.5px; font-weight:600; color:var(--orange);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px;
}
.fhead h2 {
  font-family:'DM Serif Display', serif;
  font-size:28px; font-weight:400; letter-spacing:-.4px; line-height:1.18;
  color:var(--t1);
}
.fhead p { margin-top:8px; font-size:13.5px; color:var(--t2); line-height:1.6; }
.fhead p a { color:var(--orange); text-decoration:none; font-weight:500; }
.fhead p a:hover { text-decoration:underline; }

/* Social row */
.social-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:22px; animation: riseUp .55s .18s ease both;
}
.soc-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:44px; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  color:var(--t1); font-family:'Sora',sans-serif;
  font-size:13px; font-weight:500; cursor:pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.soc-btn:hover {
  border-color:var(--border-h); background:var(--elevated);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}

/* Divider */
.divider {
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
  animation: riseUp .55s .22s ease both;
}
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }
.divider span { font-size:11.5px; color:var(--t3); font-weight:500; letter-spacing:.04em; white-space:nowrap; }

/* Fields */
.fields { display:flex; flex-direction:column; gap:14px; animation: riseUp .55s .26s ease both; }
.flabel {
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; font-weight:600; color:var(--t2); margin-bottom:7px;
}
.flabel a { color:var(--orange); text-decoration:none; font-weight:500; }
.flabel a:hover { text-decoration:underline; }
.fwrap { position:relative; }
.fwrap i.fi {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--t3); font-size:13px; pointer-events:none; transition:color .15s;
}
input[type=email], input[type=password], input[type=text] {
  width:100%; height:48px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:0 44px 0 40px;
  font-family:'Sora',sans-serif; font-size:14px; color:var(--t1);
  outline:none; -webkit-appearance:none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder { color:var(--t3); }
input:focus {
  border-color:var(--orange); background:var(--elevated);
  box-shadow:0 0 0 3px rgba(242,101,34,.11);
}
.fwrap:focus-within i.fi { color:var(--orange); }
.pwd-eye {
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--t3); cursor:pointer;
  font-size:13px; transition:color .15s; padding:4px;
}
.pwd-eye:hover { color:var(--t2); }

/* Remember */
.rem-row { display:flex; align-items:center; gap:10px; margin-top:4px; }
.chk {
  width:18px; height:18px; flex-shrink:0; border-radius:5px;
  border:1.5px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
}
.chk.on { background:var(--grad); border-color:transparent; }
.chk.on::after { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:10px; color:#fff; }
.rem-lbl { font-size:13px; color:var(--t2); cursor:pointer; user-select:none; }

/* ── SUBMIT BUTTON ── */
.btn-sign {
  display:flex; align-items:center; justify-content:center; gap:0;
  width:100%; height:52px; margin-top:24px;
  background: var(--grad);
  border:none; border-radius:14px;
  font-family:'Sora',sans-serif; font-size:15px; font-weight:600; color:#fff;
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow: 0 8px 28px rgba(242,101,34,.34);
  transition: transform .18s, box-shadow .18s, filter .18s;
  animation: riseUp .55s .32s ease both;
}
.btn-sign::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 55%);
  opacity:0; transition:opacity .18s;
}
.btn-sign:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(242,101,34,.44); filter:brightness(1.04); }
.btn-sign:hover::before { opacity:1; }
.btn-sign:active { transform:translateY(0); }

.btn-icon {
  position:absolute; right:14px;
  width:28px; height:28px; border-radius:9px;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  backdrop-filter:blur(4px);
  transition: transform .18s, background .18s;
}
.btn-sign:hover .btn-icon { transform:translateX(3px); background:rgba(255,255,255,.26); }

.btn-sign.loading { pointer-events:none; }
.btn-sign.loading .btn-label { opacity:0; }
.btn-sign.loading .btn-icon { opacity:0; }
.btn-sign.loading::after {
  content:''; position:absolute;
  width:20px; height:20px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .65s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Errors */
.ferr {
  font-size:11.5px; color:#ff6b6b; margin-top:5px;
  display:none; align-items:center; gap:5px;
}
.ferr.show { display:flex; }
input.err { border-color:rgba(230,57,70,.5)!important; }
input.err:focus { box-shadow:0 0 0 3px rgba(230,57,70,.11)!important; }

/* Footer */
.ffooter { margin-top:26px; text-align:center; animation: riseUp .55s .36s ease both; }
.ffooter p { font-size:12px; color:var(--t3); line-height:1.75; }
.ffooter a { color:var(--t2); text-decoration:underline; }
.ffooter a:hover { color:var(--t1); }

/* Toast */
.toasts { position:fixed; top:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:12px;
  background:var(--elevated); border:1px solid var(--border);
  border-radius:12px; padding:14px 18px;
  font-size:13px; color:var(--t1);
  box-shadow:var(--sh-lg); pointer-events:all; min-width:250px;
  animation: tIn .28s cubic-bezier(.22,1,.36,1) both;
}
.toast i { color:var(--orange); font-size:14px; flex-shrink:0; }
@keyframes tIn { from{ opacity:0; transform:translateX(18px);} to{opacity:1;transform:translateX(0);} }

/* Progress bar */
.pbar { position:fixed; top:0; left:0; right:0; height:3px; background:var(--grad-bar); transform-origin:left; transform:scaleX(0); transition:transform .4s ease; z-index:9999; border-radius:0 3px 3px 0; }
.pbar.go { transform:scaleX(.72); }
.pbar.done { transform:scaleX(1); transition:transform .2s ease; }

/* Keyframes */
@keyframes riseUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }

/* Responsive */
@media(max-width:920px) {
  .layout { grid-template-columns:1fr; }
  .brand { display:none; }
  .form-panel { border-left:none; min-height:100vh; animation:none; }
}
@media(max-width:480px) { .form-panel { padding:40px 26px; } }


/* ═══════════════════════════════════════════════
   aMEMBER AUTH FORM BRIDGE
   Styles aMember's real login / lost-password / signup
   markup ($content) to match the Spygi sign-in design.
═══════════════════════════════════════════════ */
.form-inner .am-form,
.form-inner form { width: 100%; }

/* fieldsets ("Login to your Account", "Lost password?") → clean sections */
.form-inner fieldset { border: none; padding: 0; margin: 0 0 22px; }
.form-inner legend {
  display: block; width: 100%; padding: 0; margin: 0 0 16px;
  font-family: 'DM Serif Display', serif; font-size: 20px; font-weight: 400;
  letter-spacing: -.3px; color: var(--t1);
}
.form-inner legend span { background: none; padding: 0; }

/* rows */
.form-inner .am-row { display: block !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 0 14px !important; }
.form-inner .am-element-title { display: block !important; text-align: left !important; padding: 0 !important; margin: 0 0 7px !important; }
.form-inner .am-element-title label { font-size: 12px; font-weight: 600; color: var(--t2); }
.form-inner .am-element { display: block !important; padding: 0 !important; margin: 0 !important; }
.form-inner .comment { font-size: 12px; color: var(--t3); margin-top: 5px; }

/* inputs */
.form-inner input[type="text"],
.form-inner input[type="email"],
.form-inner input[type="password"] {
  width: 100%; height: 48px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 16px; font-family: 'Sora', sans-serif; font-size: 14px; color: var(--t1);
  outline: none; -webkit-appearance: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-inner input::placeholder { color: var(--t3); }
.form-inner input:focus { border-color: var(--orange); background: var(--elevated); box-shadow: 0 0 0 3px rgba(242,101,34,.11); }

/* remember-me checkbox */
.form-inner input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--orange); margin-right: 8px; vertical-align: middle; }

/* submit / login button → gradient */
.form-inner input[type="submit"],
.form-inner button[type="submit"],
.form-inner .am-form-submit input {
  width: 100%; height: 52px; margin-top: 10px;
  background: var(--grad) !important; color: #fff !important; border: none !important; border-radius: 14px;
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 8px 28px rgba(242,101,34,.34); transition: transform .18s, box-shadow .18s, filter .18s;
}
.form-inner input[type="submit"]:hover,
.form-inner button[type="submit"]:hover { background: var(--grad) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(242,101,34,.44); filter: brightness(1.04); }

/* links: forgot password, log in, signup */
.form-inner a { color: var(--orange) !important; text-decoration: none; font-weight: 500; }
.form-inner a:hover { text-decoration: underline; }
.form-inner .am-row a { font-size: 13px; }

/* errors */
.form-inner .am-error,
.form-inner span.am-error,
.form-inner .errors,
.form-inner ul.errors {
  background: rgba(230,57,70,.10); border: 1px solid rgba(230,57,70,.3); color: #ff6b6b;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; list-style: none; display: block;
}

/* "Not registered yet? Signup here" */
.form-inner .am-signup-link,
.signup-line { text-align: center; font-size: 13.5px; color: var(--t2); margin-top: 22px; }

/* ── overflow / vertical alignment ──────────────────────────────
   Sign-in is short → keep it centered. Other public pages (signup)
   can be tall → let them scroll and top-align so nothing is clipped. */
body { overflow-y: auto; }
.am-page-signin .form-panel { justify-content: center; }
body:not(.am-page-signin) .form-panel { justify-content: flex-start; padding-top: 56px; padding-bottom: 56px; min-height: 100vh; }

/* ── KILL aMember's white form card / legend bar / row backgrounds ──
   so the login fields blend into the Spygi form panel (light & dark). */
.form-inner .am-form form,
.form-inner .am-auth-form form,
.form-inner form {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.form-inner legend,
.form-inner .am-auth-form form legend { display: none !important; }
.form-inner div.am-row,
.form-inner .am-auth-form div.am-row { background: none !important; box-shadow: none !important; }
.form-inner .am-body-content-wrapper,
.am-page-login .am-body-content-wrapper { background: none !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
/* logo: ensure exactly one shows per theme (img display controlled by class, not inline) */
.logotype .logo-dark, .logotype .logo-light { object-fit: contain; }

/* spacing between the submit button and the Forgot-password / Log-In link */
.form-inner .am-form-login-switch-wrapper { display: block; margin-top: 16px; }
.form-inner .am-form-login-switch { font-size: 13px; font-weight: 500; }
.form-inner .am-row-buttons .am-element { display: block; }

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP FORM — stack rows, widen panel, style products
   (fixes aMember's floated 35%/65% two-column squish)
═══════════════════════════════════════════════════════════════ */

/* widen the form panel on signup — the product list + helper text need room */
.am-page-signup .layout { grid-template-columns: 1fr 600px; }
.am-page-signup .form-panel { padding: 52px 46px; justify-content: flex-start; }
.am-page-signup .form-inner { max-width: 500px; }
@media (max-width: 1080px) { .am-page-signup .layout { grid-template-columns: 1fr; } .am-page-signup .brand { display: none; } }

/* STACK every row: kill the float / 35% width / right-align from base amember.css */
.form-inner .am-row { display: block !important; float: none !important; width: auto !important; overflow: visible !important; }
.form-inner .am-element-title { float: none !important; width: auto !important; text-align: left !important; padding: 0 !important; margin: 0 0 6px !important; }
.form-inner .am-element { margin-left: 0 !important; float: none !important; width: auto !important; padding: 0 !important; }
.form-inner .am-element-title label { font-weight: 600 !important; font-size: 12.5px !important; color: var(--t2) !important; margin-bottom: 4px; display: block; }

/* helper text under labels — full width, readable (was squished vertically) */
.form-inner .comment,
.form-inner .am-element-title .comment,
.form-inner .am-element .comment { font-size: 12px !important; color: var(--t3) !important; opacity: 1 !important; line-height: 1.5 !important; margin: 4px 0 0 !important; font-weight: 400 !important; border: none !important; background: none !important; }

/* grouped inputs (First Name / Last Name in one element) — add air */
.form-inner .am-element input[type="text"] + input[type="text"],
.form-inner .am-element input + br + input { margin-top: 10px; }

/* membership + payment options */
.form-inner .am-product-title,
.form-inner .am-paysystem-title { font-weight: 700; color: var(--t1); }
.form-inner .am-product-desc,
.form-inner .am-paysystem-desc { color: var(--t2); font-size: 13px; font-style: normal; }
.form-inner .am-element input[type="radio"],
.form-inner .am-element input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; vertical-align: middle; margin-right: 7px; cursor: pointer; }
.form-inner .am-element label { cursor: pointer; line-height: 1.9; }

/* "If you already have an account, please log in" notice → Spygi info banner */
.form-inner .am-info,
.form-inner .am-row-info,
.form-inner .info,
.form-inner .am-signup-login-info { background: linear-gradient(135deg, rgba(244,169,54,.12), rgba(242,101,34,.09)); border: 1px solid rgba(242,101,34,.22); border-radius: 12px; padding: 13px 16px; color: var(--t1); font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; }
.form-inner .am-info a { color: var(--orange) !important; font-weight: 600; }

/* required asterisk */
.form-inner .am-element-title .required,
.form-inner .required { color: #e0524f; }

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — remove leftover white panels + contain product list
═══════════════════════════════════════════════════════════════ */

/* nuke every leftover container background / border / shadow (the white box) */
.form-inner .am-signup,
.form-inner .am-signup > div,
.form-inner .am-signup form,
.form-inner .am-signup .am-form,
.form-inner .am-signup-form,
.form-inner .am-signup fieldset,
.form-inner .am-signup .am-row,
.form-inner .am-signup .am-element { background: transparent !important; background-color: transparent !important; box-shadow: none !important; }
.form-inner .am-signup form,
.form-inner .am-signup .am-form,
.form-inner .am-signup-form,
.form-inner .am-signup fieldset { border: none !important; }

/* options: orange radios, comfortable rows (no display change → never breaks the line) */
.form-inner .am-element label { cursor: pointer; line-height: 1.95; }
.form-inner .am-element input[type="radio"],
.form-inner .am-element input[type="checkbox"] { accent-color: var(--orange) !important; width: 16px; height: 16px; margin-right: 9px; vertical-align: -2px; cursor: pointer; }

/* the long membership list → a tidy, scrollable card (contains the overflow) */
.form-inner .am-element:has(.am-product-title) {
  max-height: 340px;
  overflow-y: auto;
  background: var(--card) !important;
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 8px 12px !important;
  margin-top: 2px;
}
.form-inner .am-element:has(.am-product-title)::-webkit-scrollbar { width: 8px; }
.form-inner .am-element:has(.am-product-title)::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 8px; }
.form-inner .am-element:has(.am-product-title)::-webkit-scrollbar-track { background: transparent; }

/* re-apply the "already have an account / log in" info banner (it was reset above) */
.form-inner .am-signup .am-info,
.form-inner .am-info { background: linear-gradient(135deg, rgba(244,169,54,.12), rgba(242,101,34,.09)) !important; border: 1px solid rgba(242,101,34,.22) !important; border-radius: 12px; padding: 13px 16px; }

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — full premium conversion (bulletproof)
   Nuke EVERY background inside the aMember signup form, then
   re-apply only on the elements we want. Guarantees no white box.
═══════════════════════════════════════════════════════════════ */

/* 1) universal reset — kill all container backgrounds/borders/shadows */
.form-inner .am-signup,
.form-inner .am-signup * { background-color: transparent !important; }
.form-inner .am-signup form,
.form-inner .am-signup fieldset,
.form-inner .am-signup .am-form,
.form-inner .am-signup-form,
.form-inner .am-signup .am-row,
.form-inner .am-signup .am-element { border: none !important; box-shadow: none !important; }

/* 2) re-apply backgrounds ONLY where wanted ----------------------- */
/* inputs / textareas / selects → Spygi field surface */
.form-inner .am-signup input[type="text"],
.form-inner .am-signup input[type="email"],
.form-inner .am-signup input[type="password"],
.form-inner .am-signup input[type="tel"],
.form-inner .am-signup textarea,
.form-inner .am-signup select { background: var(--card) !important; border: 1px solid var(--border) !important; }
.form-inner .am-signup input:focus,
.form-inner .am-signup textarea:focus,
.form-inner .am-signup select:focus { border-color: var(--orange) !important; background: var(--elevated) !important; box-shadow: 0 0 0 3px rgba(242,101,34,.11) !important; }

/* submit (Next / Signup) → gradient */
.form-inner .am-signup input[type="submit"],
.form-inner .am-signup button[type="submit"] { background: var(--grad) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 28px rgba(242,101,34,.34) !important; }

/* membership product list → contained scrollable card */
.form-inner .am-element:has(.am-product-title) { background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: var(--sh-card) !important; }

/* the "log in to continue" notice */
.form-inner .am-info { background: linear-gradient(135deg, rgba(244,169,54,.12), rgba(242,101,34,.09)) !important; border: 1px solid rgba(242,101,34,.22) !important; }

/* 3) section rhythm — give each row room to breathe ---------------- */
.form-inner .am-signup .am-row { margin-bottom: 22px !important; }
.form-inner .am-signup .am-element-title label { font-size: 13px !important; font-weight: 600 !important; color: var(--t2) !important; }

/* 4) payment options → tidy selectable rows */
.form-inner .am-paysystem-title { font-weight: 700; color: var(--t1); font-size: 14.5px; }
.form-inner .am-paysystem-desc { color: var(--t2); font-size: 12.5px; font-style: normal; display: block; margin-top: 2px; }

/* 5) brand panel stays in view while the long form scrolls */
@media (min-width: 1081px) {
  .am-page-signup .brand { position: sticky; top: 0; align-self: start; height: 100vh; }
}

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP WIZARD (3 steps) — scoped to .am-page-signup only
═══════════════════════════════════════════════════════════════ */
/* SAFE reveal: form is only dimmed before the wizard runs, never hidden,
   and a keyframe forces it back to full opacity if the JS ever fails. */
.am-page-signup .am-signup form:not([data-spygi-wizard]) { animation: spygiSignupReveal 1.2s ease forwards; }
.am-page-signup .am-signup form[data-spygi-wizard] { opacity: 1 !important; }
@keyframes spygiSignupReveal { 0% { opacity: .35; } 100% { opacity: 1; } }

.am-page-signup .spygi-wizard { width: 100%; }

/* progress header */
.am-page-signup .spygi-progress { display: flex; align-items: center; margin: 4px 0 26px; }
.am-page-signup .spygi-prog-step { display: flex; align-items: center; gap: 8px; }
.am-page-signup .spygi-prog-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); color: var(--t3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; transition: all .2s; }
.am-page-signup .spygi-prog-lbl { font-size: 12.5px; font-weight: 600; color: var(--t3); transition: color .2s; }
.am-page-signup .spygi-prog-line { flex: 1; height: 2px; background: var(--border); margin: 0 10px; }
.am-page-signup .spygi-prog-step.current .spygi-prog-dot { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(242,101,34,.3); }
.am-page-signup .spygi-prog-step.current .spygi-prog-lbl { color: var(--t1); }
.am-page-signup .spygi-prog-step.done .spygi-prog-dot { background: var(--orange); border-color: transparent; color: #fff; }
.am-page-signup .spygi-prog-step.done .spygi-prog-lbl { color: var(--t2); }

/* steps */
.am-page-signup .spygi-step { display: none; }
.am-page-signup .spygi-step.active { display: block; animation: riseUp .35s ease both; }
.am-page-signup .spygi-step-head { margin-bottom: 18px; }
.am-page-signup .spygi-step-title { font-family: 'DM Serif Display', serif; font-size: 22px; font-weight: 400; letter-spacing: -.3px; color: var(--t1); }
.am-page-signup .spygi-step-sub { font-size: 13.5px; color: var(--t2); margin-top: 4px; }
.am-page-signup .spygi-step-body .am-row { margin-bottom: 18px !important; }

/* step nav buttons */
.am-page-signup .spygi-step-nav { display: flex; gap: 12px; margin-top: 26px; }
.am-page-signup .spygi-btn-next, .am-page-signup .spygi-btn-back { height: 50px; border-radius: 13px; font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 600; cursor: pointer; border: none; transition: transform .18s, box-shadow .18s, filter .18s, background .18s; }
.am-page-signup .spygi-btn-next { flex: 1; background: var(--grad); color: #fff; box-shadow: 0 8px 24px rgba(242,101,34,.32); }
.am-page-signup .spygi-btn-next:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 32px rgba(242,101,34,.42); }
.am-page-signup .spygi-btn-back { padding: 0 22px; background: var(--card); color: var(--t2); border: 1px solid var(--border); }
.am-page-signup .spygi-btn-back:hover { border-color: var(--border-h); color: var(--t1); }

/* premium option cards (products + payment) */
.am-page-signup .spygi-opt { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; cursor: pointer; background: var(--card); transition: border-color .15s, background .15s, box-shadow .15s; }
.am-page-signup .spygi-opt:hover { border-color: var(--border-h); background: var(--elevated); }
.am-page-signup .spygi-opt.selected { border-color: var(--orange); background: rgba(242,101,34,.06); box-shadow: 0 0 0 3px rgba(242,101,34,.10); }
.am-page-signup .spygi-opt input[type="radio"], .am-page-signup .spygi-opt input[type="checkbox"] { accent-color: var(--orange) !important; width: 18px; height: 18px; flex-shrink: 0; margin: 0; cursor: pointer; }
.am-page-signup .spygi-opt .am-product-title, .am-page-signup .spygi-opt .am-paysystem-title { font-weight: 700; color: var(--t1); font-size: 14.5px; }
.am-page-signup .spygi-opt .am-product-terms { color: var(--t2); font-size: 13px; margin-left: 4px; }
.am-page-signup .spygi-opt .am-product-desc, .am-page-signup .spygi-opt .am-paysystem-desc { color: var(--t2); font-size: 12.5px; font-style: normal; display: block; width: 100%; margin-top: 2px; }
.am-page-signup .spygi-opt.shake { animation: spygiShake .4s; border-color: #e0524f; }
@keyframes spygiShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

/* product step: make the container a clean scroll area (cards inside are the visible items, no double border) */
.am-page-signup .spygi-step[data-step="2"] .am-element { max-height: 56vh; overflow-y: auto; background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 8px 2px 2px !important; }
.am-page-signup .spygi-step[data-step="2"] .am-element::-webkit-scrollbar { width: 8px; }
.am-page-signup .spygi-step[data-step="2"] .am-element::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 8px; }

/* membership / payment row title → small caption above the cards */
.am-page-signup .spygi-step .am-element-title { margin-bottom: 10px !important; }
.am-page-signup .spygi-step .am-element-title label { font-size: 12px !important; letter-spacing: .04em; text-transform: uppercase; color: var(--t3) !important; }

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — FIXED-HEIGHT PANEL  (no full-page scroll)
   The whole signup lives inside the right white panel, locked to the
   viewport height. Only .form-inner scrolls INTERNALLY when a step is
   taller than the panel; Steps 2 & 3 keep Back/Next visible because the
   long product list gets its own contained scroll box.
   Robust 2-level model (panel = flex parent, form-inner = scroll child)
   — it can never collapse the form: worst case is the old scroll, never
   hidden content. Released to normal flow on small / short screens.
═══════════════════════════════════════════════════════════════ */

/* 1 ── kill page-level scroll, on the signup page only */
html:has(body.am-page-signup) { overflow: hidden; }
body.am-page-signup { height: 100vh; min-height: 0; overflow: hidden; }
.am-page-signup .layout { height: 100vh !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr) !important; align-items: stretch; }
.am-page-signup .brand { height: 100vh; min-height: 0; overflow: hidden; position: static; align-self: stretch; }

/* 2 ── right panel = fixed-height flex column */
.am-page-signup .form-panel {
  position: relative;
  height: 100vh !important; min-height: 0 !important; max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
  padding: 26px 42px 22px !important;
}

/* 3 ── ONLY the inner column scrolls, and only when it must */
.am-page-signup .form-inner {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  max-width: 500px; width: 100%;
  padding-right: 8px;                 /* room for the scrollbar */
  -webkit-overflow-scrolling: touch;
}
.am-page-signup .form-inner::-webkit-scrollbar { width: 8px; }
.am-page-signup .form-inner::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 8px; }
.am-page-signup .form-inner::-webkit-scrollbar-track { background: transparent; }

/* 4 ── COMPACT spacing so Step 1 fits the panel without scrolling */
.am-page-signup .fhead { margin-bottom: 12px !important; }
.am-page-signup .fhead h2 { margin: 4px 0 4px !important; line-height: 1.04 !important; }
.am-page-signup .fhead p { margin: 0 !important; }
.am-page-signup .fhead .badge { margin-bottom: 8px !important; }
.am-page-signup .am-info,
.am-page-signup .am-signup .am-info { padding: 10px 14px !important; margin-bottom: 12px !important; font-size: 13px !important; line-height: 1.4 !important; }
.am-page-signup .spygi-progress { margin: 0 0 14px !important; }
.am-page-signup .spygi-step-head { margin-bottom: 10px !important; }
.am-page-signup .spygi-step-title { font-size: 20px !important; }
.am-page-signup .spygi-step-sub { margin-top: 2px !important; font-size: 13px !important; }
.am-page-signup .spygi-step-body .am-row { margin-bottom: 11px !important; }
.am-page-signup .form-inner input[type="text"],
.am-page-signup .form-inner input[type="email"],
.am-page-signup .form-inner input[type="password"] { height: 44px !important; }
.am-page-signup .form-inner .am-element-title { margin: 0 0 4px !important; }
.am-page-signup .form-inner .comment { margin: 2px 0 0 !important; font-size: 11.5px !important; line-height: 1.4 !important; }
.am-page-signup .form-inner .am-error,
.am-page-signup .form-inner span.am-error,
.am-page-signup .form-inner .errors,
.am-page-signup .form-inner ul.errors { padding: 7px 12px !important; font-size: 12px !important; margin: 5px 0 0 !important; }
.am-page-signup .spygi-step-nav { margin-top: 14px !important; }
.am-page-signup .spygi-btn-next, .am-page-signup .spygi-btn-back { height: 46px !important; }

/* 5 ── compact option cards */
.am-page-signup .spygi-opt { padding: 11px 14px !important; margin-bottom: 8px !important; gap: 11px !important; }

/* 6 ── STEP 2 product list: contained scroll box, height adapts to the
   viewport (room left for header + banner + progress + step head + nav)
   so Back/Next stay visible and the panel itself never needs to scroll. */
.am-page-signup .spygi-step[data-step="2"] .am-element {
  max-height: calc(100vh - 420px) !important;
  min-height: 150px !important;
  overflow-y: auto !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 2px 8px 2px 2px !important;
}

/* 7 ── small / short screens: release the lock so nothing is ever clipped
   off-screen (single column already; normal page scroll is fine here). */
@media (max-width: 1080px), (max-height: 640px) {
  html:has(body.am-page-signup) { overflow: auto; }
  body.am-page-signup { height: auto; overflow: auto; }
  .am-page-signup .layout { height: auto !important; min-height: 100vh !important; grid-template-rows: auto !important; }
  .am-page-signup .brand { height: auto; }
  .am-page-signup .form-panel { height: auto !important; max-height: none !important; min-height: 100vh !important; overflow: visible !important; }
  .am-page-signup .form-inner { overflow: visible; min-height: 0; }
  .am-page-signup .spygi-step[data-step="2"] .am-element { max-height: 60vh !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — POLISH PASS
   Premium progress bar, real option cards (radio + name + price
   inside ONE box), soft errors, consistent rhythm. Scoped to signup.
═══════════════════════════════════════════════════════════════ */

/* ── 1. PROGRESS BAR — full width, aligned to the content edges,
      equal spacing, gradient active, subtle inactive, compact ── */
.am-page-signup .spygi-progress { display: flex !important; align-items: center; justify-content: space-between; gap: 0; margin: 2px 0 18px !important; padding: 0; }
.am-page-signup .spygi-prog-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.am-page-signup .spygi-prog-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--card); color: var(--t3); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; box-shadow: none; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.am-page-signup .spygi-prog-lbl { font-size: 12.5px; font-weight: 600; color: var(--t3); white-space: nowrap; transition: color .2s; }
.am-page-signup .spygi-prog-line { flex: 1 1 auto; min-width: 14px; height: 2px; margin: 0 10px; background: var(--border); border-radius: 2px; transition: background .25s; }
.am-page-signup .spygi-prog-line.filled { background: var(--orange); }
.am-page-signup .spygi-prog-step.current .spygi-prog-dot { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(242,101,34,.30); }
.am-page-signup .spygi-prog-step.current .spygi-prog-lbl { color: var(--t1); }
.am-page-signup .spygi-prog-step.done .spygi-prog-dot { background: var(--orange); border-color: transparent; color: #fff; box-shadow: none; }
.am-page-signup .spygi-prog-step.done .spygi-prog-lbl { color: var(--t2); }

/* ── 2. hide the REAL aMember submit row (kept in DOM, fired by Continue) ── */
.am-page-signup .spygi-realsubmit { display: none !important; }

/* ── 3. OPTION CARDS — products + paysystems ──
   cardify() promotes aMember's own <label for=ID><input id=ID> …</label>
   wrapper into the card, so radio + title + price live INSIDE one box.
   These rules win over the generic .form-inner .am-element label styles. */
.am-page-signup .form-inner .spygi-opt {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px !important;
  width: 100%; margin: 0 0 8px !important; padding: 12px 14px !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
  background: var(--card) !important; cursor: pointer; line-height: 1.4 !important;
  box-shadow: none !important; transition: border-color .15s, background .15s, box-shadow .15s;
}
.am-page-signup .form-inner .spygi-opt:hover { border-color: var(--border-h) !important; background: var(--elevated) !important; }
.am-page-signup .form-inner .spygi-opt.selected { border-color: var(--orange) !important; background: rgba(242,101,34,.06) !important; box-shadow: 0 0 0 3px rgba(242,101,34,.10) !important; }
.am-page-signup .form-inner .spygi-opt > input[type="radio"],
.am-page-signup .form-inner .spygi-opt > input[type="checkbox"] { width: 18px !important; height: 18px !important; flex: 0 0 auto; margin: 0 !important; accent-color: var(--orange) !important; cursor: pointer; vertical-align: middle; }
.am-page-signup .form-inner .spygi-opt .am-product-title,
.am-page-signup .form-inner .spygi-opt .am-paysystem-title { font-weight: 700 !important; color: var(--t1) !important; font-size: 14.5px !important; line-height: 1.35 !important; }
.am-page-signup .form-inner .spygi-opt .am-product-terms { color: var(--t2) !important; font-size: 13px !important; margin-left: 2px; }
.am-page-signup .form-inner .spygi-opt .am-product-desc,
.am-page-signup .form-inner .spygi-opt .am-paysystem-desc { flex-basis: 100%; width: 100%; color: var(--t2) !important; font-size: 12.5px !important; font-style: normal !important; margin: 2px 0 0 !important; padding-left: 30px; line-height: 1.4 !important; }
.am-page-signup .form-inner .spygi-opt .am-product-empty { color: var(--t2) !important; font-weight: 600 !important; }
.am-page-signup .form-inner .spygi-opt .am-product-qty { display: none !important; }
.am-page-signup .form-inner .spygi-opt br { display: none !important; }

/* the radio-group container becomes a clean, transparent internal scroll
   box (the cards are the visible items). Only the element that actually
   holds the cards scrolls — never the page, never the section title. */
.am-page-signup .spygi-step[data-step="2"] .am-element:has(.spygi-opt) {
  max-height: calc(100vh - 430px) !important; min-height: 130px;
  overflow-y: auto; overflow-x: hidden;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 2px 6px 2px 2px !important; margin: 0 !important;
}
.am-page-signup .spygi-step[data-step="3"] .am-element:has(.spygi-opt) {
  max-height: calc(100vh - 360px) !important;
  overflow-y: auto; overflow-x: hidden;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 2px 6px 2px 2px !important; margin: 0 !important;
}
.am-page-signup .spygi-step .am-element:has(.spygi-opt)::-webkit-scrollbar { width: 8px; }
.am-page-signup .spygi-step .am-element:has(.spygi-opt)::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 8px; }
.am-page-signup .spygi-step .am-element:has(.spygi-opt)::-webkit-scrollbar-track { background: transparent; }

/* ── 4. ERRORS — soft, compact, premium (light + dark) ── */
.am-page-signup .form-inner .am-error,
.am-page-signup .form-inner span.am-error,
.am-page-signup .form-inner .errors,
.am-page-signup .form-inner ul.errors,
.am-page-signup .form-inner .am-errors {
  background: rgba(192,57,43,.07) !important; border: 1px solid rgba(192,57,43,.20) !important;
  color: #cf5246 !important; border-radius: 10px !important;
  padding: 8px 12px !important; font-size: 12.5px !important; line-height: 1.45 !important;
  margin: 6px 0 0 !important; font-weight: 500 !important; box-shadow: none !important;
}
body[data-theme="dark"].am-page-signup .form-inner .am-error,
body[data-theme="dark"].am-page-signup .form-inner span.am-error,
body[data-theme="dark"].am-page-signup .form-inner .errors,
body[data-theme="dark"].am-page-signup .form-inner ul.errors,
body[data-theme="dark"].am-page-signup .form-inner .am-errors {
  background: rgba(230,90,76,.10) !important; border-color: rgba(230,90,76,.26) !important; color: #ef8a7f !important;
}
.am-page-signup .form-inner .am-error br { display: none !important; }
.am-page-signup .form-inner .am-row.error .am-element input,
.am-page-signup .form-inner .am-row .error input { border-color: rgba(192,57,43,.45) !important; }

/* ── 5. CONSISTENT SECTION RHYTHM (aligned, even gaps) ── */
.am-page-signup .fhead { margin-bottom: 14px !important; }
.am-page-signup .am-info,
.am-page-signup .am-signup .am-info { margin: 0 0 14px !important; }
.am-page-signup .spygi-step-head { margin-bottom: 12px !important; }
.am-page-signup .spygi-step-body .am-row { margin-bottom: 12px !important; }
.am-page-signup .spygi-step-nav { margin-top: 16px !important; gap: 12px; }
.am-page-signup .spygi-step .am-element-title { margin: 0 0 9px !important; }

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — STEPPER v2 (premium + motion) + toggle guard
═══════════════════════════════════════════════════════════════ */

/* ── compact, centered, premium progress (smaller than before) ── */
.am-page-signup .spygi-progress { display: flex !important; align-items: center; justify-content: center !important; gap: 0; margin: 4px 0 20px !important; }
.am-page-signup .spygi-prog-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.am-page-signup .spygi-prog-dot {
  width: 23px !important; height: 23px !important; box-sizing: border-box !important;
  border-radius: 50%; border: 1.5px solid var(--border) !important; background: var(--card) !important;
  color: var(--t3) !important; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px !important; font-weight: 700; line-height: 1; flex: 0 0 23px;
  box-shadow: none !important; transition: background .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s;
}
.am-page-signup .spygi-prog-lbl { font-size: 12px !important; font-weight: 600; color: var(--t3) !important; white-space: nowrap; letter-spacing: -0.1px; transition: color .25s; }
.am-page-signup .spygi-prog-line { flex: 0 1 38px !important; min-width: 16px; height: 2px; margin: 0 9px !important; background: var(--border) !important; border-radius: 2px; transition: background .3s; }
.am-page-signup .spygi-prog-line.filled { background: var(--orange) !important; }
/* active = gradient, no ring, subtle lift */
.am-page-signup .spygi-prog-step.current .spygi-prog-dot { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 3px 10px rgba(242,101,34,.32) !important; transform: scale(1.06); }
.am-page-signup .spygi-prog-step.current .spygi-prog-lbl { color: var(--t1) !important; }
/* done = solid orange */
.am-page-signup .spygi-prog-step.done .spygi-prog-dot { background: var(--orange) !important; border-color: transparent !important; color: #fff !important; box-shadow: none !important; transform: none; }
.am-page-signup .spygi-prog-step.done .spygi-prog-lbl { color: var(--t2) !important; }

/* ── STEP MOTION — slide + fade, direction-aware (set by go() in JS) ── */
.am-page-signup .spygi-step.active { animation: none; }                 /* drop the old riseUp */
.am-page-signup .spygi-step.active.slide-fwd  { animation: spygiSlideFwd  .34s cubic-bezier(.22,1,.36,1) both; }
.am-page-signup .spygi-step.active.slide-back { animation: spygiSlideBack .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes spygiSlideFwd  { from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes spygiSlideBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
/* keep the slide from ever showing a horizontal scrollbar */
.am-page-signup .form-inner { overflow-x: hidden !important; }
@media (prefers-reduced-motion: reduce) {
  .am-page-signup .spygi-step.active.slide-fwd,
  .am-page-signup .spygi-step.active.slide-back { animation: none; }
}

/* ── DARK/LIGHT toggle: always on top & clickable on signup ── */
.am-page-signup .theme-toggle { z-index: 30 !important; pointer-events: auto !important; }
.am-page-signup .theme-toggle .toggle-opt { pointer-events: auto !important; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — UI FIX PASS (step circles, stepper centering, toggle)
   Scoped to .am-page-signup only — login / dashboard untouched.
═══════════════════════════════════════════════════════════════ */

/* ── 1. NUMBERED CIRCLES — premium, NO outline border ──
   Reached steps (current + done) use the full Spygi gradient; upcoming
   steps use a soft brand-tinted fill. Numbers perfectly centered. */
.am-page-signup .spygi-prog-dot {
  width: 38px !important; height: 38px !important; box-sizing: border-box !important;
  flex: 0 0 38px !important; border: none !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important;
  background: rgba(158,17,16,0.08) !important; color: var(--t3) !important;
  box-shadow: none !important; text-align: center;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.am-page-signup .spygi-prog-step.current .spygi-prog-dot,
.am-page-signup .spygi-prog-step.done .spygi-prog-dot {
  background: linear-gradient(135deg, #F4A936 0%, #F26522 50%, #9E1110 100%) !important;
  color: #FFFFFF !important; border: none !important;
  box-shadow: 0 8px 20px rgba(158,17,16,0.16) !important;
}
.am-page-signup .spygi-prog-step.current .spygi-prog-dot { transform: scale(1.05); }
/* dark mode: upcoming fill stays visible & on-brand */
body[data-theme="dark"].am-page-signup .spygi-prog-dot { background: rgba(255,255,255,0.08) !important; color: var(--t3) !important; }

/* ── 2. STEPPER ROW — slightly smaller, centered, balanced, never touches edges ── */
.am-page-signup .spygi-progress {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 0 !important; width: 100%; max-width: 440px !important;
  margin: 6px auto 22px !important; padding: 0 !important;
}
.am-page-signup .spygi-prog-step { display: flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; }
.am-page-signup .spygi-prog-lbl { font-size: 13px !important; font-weight: 600 !important; white-space: nowrap; color: var(--t3) !important; letter-spacing: -0.1px; transition: color .25s; }
.am-page-signup .spygi-prog-step.current .spygi-prog-lbl { color: var(--t1) !important; }
.am-page-signup .spygi-prog-step.done .spygi-prog-lbl { color: var(--t2) !important; }
.am-page-signup .spygi-prog-line { flex: 1 1 auto !important; min-width: 14px; max-width: 42px !important; height: 2px !important; margin: 0 9px !important; background: var(--border) !important; border-radius: 2px; transition: background .3s; }
.am-page-signup .spygi-prog-line.filled { background: var(--orange) !important; }

/* keep it tidy on small screens (shrink, don't overflow) */
@media (max-width: 560px) {
  .am-page-signup .spygi-prog-dot { width: 32px !important; height: 32px !important; flex-basis: 32px !important; font-size: 13.5px !important; }
  .am-page-signup .spygi-prog-step { gap: 7px !important; }
  .am-page-signup .spygi-prog-lbl { font-size: 12px !important; }
  .am-page-signup .spygi-prog-line { margin: 0 6px !important; max-width: 26px !important; }
}

/* ── 3. THEME TOGGLE — moved slightly left, aligned with the panel content
      edge, intentionally placed, premium pill (still functional) ── */
.am-page-signup .theme-toggle {
  top: 24px !important; right: 42px !important; left: auto !important;
  padding: 4px !important; gap: 2px !important;
  background: var(--card) !important; border: 1px solid var(--border) !important;
  border-radius: 100px !important; box-shadow: var(--sh-card) !important;
}
.am-page-signup .theme-toggle .toggle-opt { height: 30px !important; padding: 0 13px !important; border-radius: 100px !important; }

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — PREMIUM FORM POLISH  (CSS only, scoped to signup)
   Turns the right-side aMember form into a clean premium SaaS panel.
   Targets the real generated classes: .form-panel / .form-inner /
   .am-row / .am-element / .am-element-title / .comment / .am-info /
   input.am-change-pass / .spygi-prog-* / .spygi-btn-* / .theme-toggle.
   Light + dark. No markup, routes, names, hidden fields or logic touched.
═══════════════════════════════════════════════════════════════ */

/* ── FIX 6 (first, so layout below is predictable): theme toggle becomes a
      right-aligned header chip above the card, not a floating absolute pill ── */
.am-page-signup .theme-toggle {
  position: static !important; top: auto !important; right: auto !important; left: auto !important;
  align-self: flex-end !important; z-index: auto !important;
  margin: 0 0 16px 0 !important;
}

/* ── FIX 1: premium form CARD (the real .form-inner wrapper) ── */
.am-page-signup .form-panel { padding: 22px 38px 22px !important; }
.am-page-signup .form-inner {
  width: 100% !important; max-width: 560px !important; margin: 0 auto !important;
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(17,17,17,0.09) !important;
  box-shadow: 0 24px 70px rgba(17,17,17,0.08) !important;
  border-radius: 28px !important;
  padding: 42px !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
body[data-theme="dark"].am-page-signup .form-inner {
  background: rgba(22,22,22,0.92) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5) !important;
}
.am-page-signup .form-inner::-webkit-scrollbar { width: 7px; }
.am-page-signup .form-inner::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.14); border-radius: 8px; }
body[data-theme="dark"].am-page-signup .form-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }

/* ── FIX 2: refined stepper (Spygi gradient active, soft inactive, gradient connector) ── */
.am-page-signup .spygi-progress { max-width: 440px !important; margin: 6px auto 28px !important; justify-content: center !important; }
.am-page-signup .spygi-prog-dot {
  width: 40px !important; height: 40px !important; flex: 0 0 40px !important;
  border: none !important; box-shadow: none !important;
  background: #F5ECE8 !important; color: #9B8F88 !important; font-size: 15px !important;
}
.am-page-signup .spygi-prog-step.current .spygi-prog-dot,
.am-page-signup .spygi-prog-step.done .spygi-prog-dot {
  background: linear-gradient(135deg,#F4A936 0%,#F26522 50%,#9E1110 100%) !important;
  color: #fff !important; box-shadow: 0 12px 28px rgba(158,17,16,0.18) !important;
}
.am-page-signup .spygi-prog-step.current .spygi-prog-dot { transform: scale(1.04); }
.am-page-signup .spygi-prog-line {
  height: 2px !important; border-radius: 999px !important; max-width: 46px !important; min-width: 16px;
  background: linear-gradient(90deg, rgba(158,17,16,0.16), rgba(244,169,54,0.20)) !important;
}
.am-page-signup .spygi-prog-line.filled { background: linear-gradient(90deg,#F4A936,#F26522) !important; }
.am-page-signup .spygi-prog-lbl { font-size: 12.5px !important; }
body[data-theme="dark"].am-page-signup .spygi-prog-dot { background: rgba(255,255,255,0.08) !important; color: var(--t3) !important; }

/* ── FIX 3: consistent fields — force 100% width (fixes narrow password), 52px, r14 ── */
.am-page-signup .form-inner .am-row,
.am-page-signup .form-inner .am-element,
.am-page-signup .form-inner .am-element-title { width: 100% !important; max-width: 100% !important; float: none !important; margin-left: 0 !important; box-sizing: border-box; }
.am-page-signup .form-inner .am-element input[type="text"],
.am-page-signup .form-inner .am-element input[type="email"],
.am-page-signup .form-inner .am-element input[type="password"],
.am-page-signup .form-inner .am-element input[type="tel"],
.am-page-signup .form-inner .am-element input[type="number"],
.am-page-signup .form-inner input.am-change-pass,
.am-page-signup .form-inner .am-element textarea {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  height: 52px !important; border-radius: 14px !important; padding: 0 16px !important; font-size: 15px !important;
  border: 1px solid rgba(17,17,17,0.12) !important; background: rgba(255,255,255,0.92) !important; color: #111 !important;
}
.am-page-signup .form-inner .am-element textarea { height: auto !important; min-height: 96px; padding: 14px 16px !important; }
.am-page-signup .form-inner .am-element input:focus,
.am-page-signup .form-inner .am-element textarea:focus { border-color: #F26522 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(242,101,34,0.12) !important; }
body[data-theme="dark"].am-page-signup .form-inner .am-element input[type="text"],
body[data-theme="dark"].am-page-signup .form-inner .am-element input[type="email"],
body[data-theme="dark"].am-page-signup .form-inner .am-element input[type="password"],
body[data-theme="dark"].am-page-signup .form-inner input.am-change-pass,
body[data-theme="dark"].am-page-signup .form-inner .am-element textarea {
  background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.13) !important; color: #F0F0F0 !important;
}
body[data-theme="dark"].am-page-signup .form-inner .am-element input:focus { background: rgba(255,255,255,0.08) !important; border-color: #F26522 !important; }
/* labels — small, bold, uppercase, muted (not huge) */
.am-page-signup .form-inner .am-element-title,
.am-page-signup .form-inner .am-element-title label {
  font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; color: rgba(17,17,17,0.62) !important; line-height: 1.3 !important;
}
.am-page-signup .form-inner .required { color: #F26522 !important; }
body[data-theme="dark"].am-page-signup .form-inner .am-element-title,
body[data-theme="dark"].am-page-signup .form-inner .am-element-title label { color: rgba(255,255,255,0.58) !important; }
/* helper text — small, muted, clean */
.am-page-signup .form-inner .comment,
.am-page-signup .form-inner .am-element .comment {
  font-size: 13px !important; line-height: 1.45 !important; color: rgba(17,17,17,0.52) !important; font-weight: 400 !important;
}
body[data-theme="dark"].am-page-signup .form-inner .comment { color: rgba(255,255,255,0.45) !important; }

/* ── FIX 4: consistent section rhythm ── */
.am-page-signup .fhead { margin-bottom: 20px !important; }
.am-page-signup .form-inner .am-row { margin-bottom: 24px !important; }
.am-page-signup .form-inner .am-element-title { margin: 0 0 9px !important; }
.am-page-signup .form-inner .am-element-title .comment { margin-top: 4px !important; }
.am-page-signup .form-inner .am-element input[type="text"] + input[type="text"],
.am-page-signup .form-inner .am-element input + br + input { margin-top: 11px !important; }
.am-page-signup .spygi-step-head { margin: 0 0 20px !important; }
.am-page-signup .spygi-step-nav { margin-top: 24px !important; }

/* ── FIX 5: compact, intentional login alert ── */
.am-page-signup .form-inner .am-info,
.am-page-signup .am-signup .am-info {
  background: rgba(244,169,54,0.08) !important; border: 1px solid rgba(242,101,34,0.22) !important;
  border-radius: 16px !important; padding: 14px 16px !important;
  font-size: 14.5px !important; line-height: 1.5 !important; margin: 0 0 24px !important;
}
.am-page-signup .form-inner .am-info a { color: #F26522 !important; font-weight: 700 !important; }
body[data-theme="dark"].am-page-signup .form-inner .am-info { background: rgba(244,169,54,0.10) !important; color: #ededed !important; }

/* ── FIX 7: premium primary button (Next / Continue / submit) ── */
.am-page-signup .spygi-btn-next,
.am-page-signup .spygi-continue,
.am-page-signup .form-inner .am-signup input[type="submit"],
.am-page-signup .form-inner input[type="submit"] {
  width: 100% !important; height: 56px !important; border-radius: 16px !important;
  background: linear-gradient(135deg,#F4A936 0%,#F26522 50%,#9E1110 100%) !important;
  color: #fff !important; border: none !important; font-size: 15.5px !important; font-weight: 700 !important;
  box-shadow: 0 12px 28px rgba(158,17,16,0.20) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.am-page-signup .spygi-btn-next:hover,
.am-page-signup .spygi-continue:hover,
.am-page-signup .form-inner input[type="submit"]:hover {
  background: linear-gradient(135deg,#F4A936 0%,#F26522 50%,#9E1110 100%) !important; color: #fff !important;
  transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 16px 34px rgba(158,17,16,0.26) !important;
}
.am-page-signup .spygi-btn-back { height: 56px !important; border-radius: 16px !important; }

/* ── product list scroll box: keep it contained inside the card (no double scroll) ── */
.am-page-signup .spygi-step[data-step="2"] .am-element:has(.spygi-opt) { max-height: calc(100vh - 500px) !important; }

/* ── mobile: relax the card so nothing is clipped ── */
@media (max-width: 1080px), (max-height: 700px) {
  .am-page-signup .form-inner { max-width: 100% !important; padding: 30px 22px !important; border-radius: 22px !important; }
  .am-page-signup .form-panel { padding: 18px 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SPYGI · SIGN-UP — DARK MODE REFINEMENT
   The dark card is now #161616 (matches the dashboard). These rules keep
   the nested product/payment cards elevated/distinct from that container,
   keep placeholders readable, and tidy the scrollbar — dark mode only.
═══════════════════════════════════════════════════════════════ */
body[data-theme="dark"].am-page-signup .form-inner .spygi-opt {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
body[data-theme="dark"].am-page-signup .form-inner .spygi-opt:hover {
  background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.16) !important;
}
body[data-theme="dark"].am-page-signup .form-inner .spygi-opt.selected {
  background: rgba(242,101,34,0.14) !important; border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(242,101,34,0.14) !important;
}
/* readable placeholders + product/payment titles on the dark card */
body[data-theme="dark"].am-page-signup .form-inner input::placeholder { color: rgba(255,255,255,0.42) !important; }
body[data-theme="dark"].am-page-signup .form-inner .spygi-opt .am-product-title,
body[data-theme="dark"].am-page-signup .form-inner .spygi-opt .am-paysystem-title { color: #F4F4F4 !important; }

/* ── FIX 4 (public wizard): no default square focus box on the option radios;
   the .spygi-opt card already carries the premium selected state ── */
.am-page-signup .spygi-opt input[type="radio"],
.am-page-signup .spygi-opt input[type="checkbox"] { outline: none !important; -webkit-tap-highlight-color: transparent; }
.am-page-signup .spygi-opt input[type="radio"]:focus,
.am-page-signup .spygi-opt input[type="radio"]:focus-visible,
.am-page-signup .spygi-opt input[type="checkbox"]:focus,
.am-page-signup .spygi-opt input[type="checkbox"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ISSUE 1 · Sign-up responsive from 320px up — no horizontal overflow, fits the
   viewport with padding, Safari bottom-bar safe (100dvh + safe-area), stepper shrinks
   cleanly, inputs stay 100%, text scales down. Tested intent: 320 / 360 / 390 / 430px.
═══════════════════════════════════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; }
.am-page-signup .layout,
.am-page-signup .form-panel,
.am-page-signup .form-inner { max-width: 100%; box-sizing: border-box; }
.am-page-signup input, .am-page-signup select, .am-page-signup textarea,
.form-inner input, .form-inner select, .form-inner textarea { max-width: 100%; box-sizing: border-box; }

/* dynamic viewport height → iOS Safari's bottom bar never covers important content */
@supports (height: 100dvh) {
  .form-panel,
  .am-page-signin .form-panel,
  body:not(.am-page-signin) .form-panel { min-height: 100dvh; }
}

@media (max-width: 430px) {
  .am-page-signup .form-panel,
  body:not(.am-page-signin) .form-panel { padding: 34px 18px calc(40px + env(safe-area-inset-bottom)) !important; }
  .am-page-signin .form-panel { padding: 28px 18px calc(30px + env(safe-area-inset-bottom)) !important; }
  .form-inner { max-width: 100% !important; }
  .fhead h2 { font-size: 26px !important; }
  /* stepper shrinks cleanly */
  .am-page-signup .spygi-progress { margin: 0 0 16px !important; }
  .am-page-signup .spygi-prog-step { gap: 5px !important; }
  .am-page-signup .spygi-prog-dot { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  .am-page-signup .spygi-prog-lbl { font-size: 11px !important; }
  .am-page-signup .spygi-prog-line { min-width: 8px !important; margin: 0 5px !important; }
  .am-page-signup .spygi-step-title { font-size: 19px !important; }
}
@media (max-width: 360px) {
  .am-page-signup .form-panel,
  body:not(.am-page-signin) .form-panel { padding: 30px 14px calc(34px + env(safe-area-inset-bottom)) !important; }
  .fhead h2 { font-size: 23px !important; }
  .am-page-signup .spygi-prog-step { gap: 4px !important; }
  .am-page-signup .spygi-prog-dot { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  .am-page-signup .spygi-prog-lbl { font-size: 10px !important; }
  .am-page-signup .spygi-prog-line { min-width: 6px !important; margin: 0 4px !important; }
  .am-page-signup .spygi-step-title { font-size: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ISSUE 1 (mobile signup STEPPER) — phones switch to a COLUMN layout: each label
   sits directly BELOW its number circle instead of beside it, so a label can never
   be pushed into / overlap the connector line again. The circles stay centred,
   evenly spaced and connected by the lines; the whole bar fits 320px → 430px with
   no horizontal overflow. Placed LAST so it wins over the earlier inline-stepper
   rules. The Spygi gradient/colours for .current / .done are inherited unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .am-page-signup .spygi-progress {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 0 !important; width: 100% !important; max-width: 360px !important;
    margin: 2px auto 16px !important; padding: 0 8px 22px !important;   /* bottom room for the labels */
    position: relative !important; overflow: visible !important;
  }
  .am-page-signup .spygi-prog-step {
    flex: 0 0 auto !important; flex-direction: column !important; align-items: center !important;
    gap: 0 !important; min-width: 0 !important; position: relative !important; overflow: visible !important;
  }
  .am-page-signup .spygi-prog-dot {
    width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
    font-size: 13px !important; line-height: 1 !important;
  }
  /* label is taken OUT OF FLOW: it widens nothing, so the circles stay evenly spaced and
     the lines reach them, while the label sits centred under its OWN circle — physically
     unable to touch the separator line (which is up at circle height). */
  .am-page-signup .spygi-prog-lbl {
    position: absolute !important; top: calc(100% + 7px) !important;
    left: 50% !important; transform: translateX(-50%) !important;
    margin: 0 !important; white-space: nowrap !important;
    font-size: 11px !important; line-height: 1 !important; text-align: center !important;
  }
  .am-page-signup .spygi-prog-line {
    flex: 1 1 auto !important; min-width: 12px !important; max-width: none !important;
    margin: 0 7px !important; align-self: center !important;
  }
}
@media (max-width: 360px) {
  .am-page-signup .spygi-progress { max-width: 300px !important; padding: 0 4px 20px !important; }
  .am-page-signup .spygi-prog-dot { width: 27px !important; height: 27px !important; flex: 0 0 27px !important; font-size: 12px !important; }
  .am-page-signup .spygi-prog-lbl { font-size: 10px !important; top: calc(100% + 6px) !important; }
  .am-page-signup .spygi-prog-line { margin: 0 5px !important; min-width: 10px !important; }
}